import { Tabs, TabsProps } from "antd";
import BIn from "./bin";
import { getRoleApi } from "@/api/role";
import { useRequest } from "ahooks";
import { useEffect, useState } from "react";
import { getUserApi } from "@/api/user";
import PieChart from "./pie";

 const  UserEchars = ()=>{
    const onChange = (key: string) => {
        console.log(key);
      };
      const getuserInfo = useRequest(getUserApi, {
        manual:true,
        onSuccess: (res) => {
            setUserData(res.result)
            getRole.run();
            
        }
    })
    const getRole = useRequest(getRoleApi,{
        manual:true,
        onSuccess:(res)=>{
            let datas:{label:string,value:number}[] = [];
            res.result.forEach(item=>datas.push({label:item.label,value:0}))
            userData.forEach(item=>{
                const y = res.result.find(items=>items.value == item.role)?.label;
                console.log(y);
                
                y && datas.find(i=>i.label == y)!.value++
                console.log(datas);
            })
            setData(datas)
            
        }
    })
    const [userData,setUserData] = useState<foundUserType[]>([])
    const [data, setData] = useState<{label:string,value:number}[]>([])
    useEffect(()=>{
        getuserInfo.run()
    },[])
      const items: TabsProps['items'] = [
        {
          key: '1',
          label: `柱状图`,
          children: <BIn data={[...data]}/>,
        },
        {
          key: '2',
          label: `饼图`,
          children:<PieChart data={[...data].map(item=>{return {value:item.value,name:item.label}})}/>,
        },

      ];
    return (
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
    )
}
export default UserEchars